<template>

    <div class="mf-box" @click="startRotation">
        <div class="box box1">
            <span class="item"></span>
        </div>
        <div class="box box2">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="box box3">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>
        <div class="box box4">
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
        <div class="box box5">
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
        <div class="box box6">
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
            <div class="column">
                <span class="item"></span>
                <span class="item"></span>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits, nextTick, watch } from 'vue';

const isRotating = ref(false);
const diceValue = ref(1); // 默认值为1，可以根据生成的随机数来改变
watch(diceValue, (newVal, oldVal) => {
    const box = document.querySelector('.mf-box') as Element | null;
    if (oldVal) {
        box?.classList.remove('show-face' + oldVal);
        box?.classList.add('show-face' + 1);
    }
    console.log('oldVal', oldVal)
    console.log('newVal', newVal)
    box?.classList.remove('show-face' + 1);
    box?.classList.add('show-face' + newVal);
}, { deep: true, immediate: true })
const emits = defineEmits(['changePoint'])
const startRotation = () => {
    const box = document.querySelector('.mf-box') as Element | null;
    if (!isRotating.value) {
        isRotating.value = true;
        box?.classList.add('rotate');
        setTimeout(() => {
            isRotating.value = false;
            box?.classList.remove('rotate');
            // 生成随机数来更新骰子点数
            diceValue.value = Math.floor(Math.random() * 6) + 1;
            console.log(diceValue.value)
            nextTick(() => {
                emits('changePoint', diceValue.value);
            });
        }, 1100);

    }
}
defineExpose({
    startRotation
})
</script>
<style lang="less" scoped>
/*骰子点数布局*/
.box {
    box-sizing: border-box;
    padding: 10px;
    width: 50px;
    height: 50px;
    background: #fff;
    display: flex;
    box-shadow: 0 0 10px #000 inset;
}

.box1 {
    justify-content: center;
    align-items: center;
}

.box2 {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.box3 {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.item {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #000;
    order: auto;
}

.box3 .item:nth-child(2) {
    align-self: center;
}

.box3 .item:nth-child(3) {
    align-self: flex-end;
}

.box4,
.box5,
.box6 {
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.column {
    display: flex;
    flex-basis: 100%;
    justify-content: space-between;
}

.box5 .column:nth-child(2) {
    justify-content: center;
}

.box6 .column {
    justify-content: space-around;
}

.mf-box {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    margin: 50px auto;
    perspective: 10000px;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateX(60deg)rotateZ(-150deg);
    /*旋转一定角度方便观察*/
}

.mf-box .box {
    position: absolute;
    width: 50px;
    height: 50px;
    // opacity: 0.8;
    /*设置每个面的透明度*/
}

.mf-box .box1 {
    transform: rotateY(0)translateZ(24px);
}

.mf-box .box2 {
    transform: rotateY(-90deg)translateZ(24px);
}

.mf-box .box3 {
    transform: rotateX(90deg)translateZ(24px);
}

.mf-box .box4 {
    transform: rotateX(-90deg)translateZ(24px);
}

.mf-box .box5 {
    transform: rotateY(90deg)translateZ(24px);
}

.mf-box .box6 {
    transform: rotateY(180deg)translateZ(24px);
}

// .mf-box {
//     animation: rotate linear 20s infinite;
// }

// @-webkit-keyframes rotate {
//     from {
//         transform: rotateX(0deg) rotateY(0deg);
//     }

//     to {
//         transform: rotateX(360deg) rotateY(360deg);
//     }
// }
.mf-box.rotate {
    animation: rotate 1s linear forwards;
}

@keyframes rotate {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.show-face1 {
    transform: rotateX(60deg)rotateZ(-150deg);
}

.show-face2 {
    transform: rotateX(150deg)rotateY(120deg)rotateZ(-90deg);
}

.show-face3 {
    transform: rotateX(-30deg)rotateY(-30deg);
}

.show-face4 {
    transform: rotateX(-30deg)rotateY(-30deg)rotateZ(-180deg);
}

.show-face5 {
    transform: rotateX(150deg)rotateY(120deg)rotateZ(-270deg);
}

.show-face6 {
    transform: rotateX(60deg)rotateY(180deg)rotateZ(-120deg);
}
</style>